import React from 'react';
import { Link } from 'react-router-dom';
import { Button, Typography, Space, Tag, Popconfirm } from 'antd';
import {
  ArrowLeftOutlined,
  SettingOutlined,
  UserAddOutlined,
  LogoutOutlined,
  GlobalOutlined,
  HomeOutlined,
  ReloadOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;

const PageHeader = ({
  network,
  userRole,
  operationLoading,
  onJoinNetwork,
  onLeaveNetwork,
  onManageNetwork,
  onRefresh,
  refreshLoading
}) => {
  // 状态标签
  const getStatusTag = (status) => {
    const statusConfig = {
      active: { color: 'success', text: '活跃' },
      inactive: { color: 'default', text: '不活跃' },
      pending: { color: 'warning', text: '等待中' }
    };
    const config = statusConfig[status] || { color: 'default', text: '未知' };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  return (
    <div className="detail-page-header">
      <Link to="/network" className="back-link">
        <ArrowLeftOutlined />
        返回列表
      </Link>
      
      <div className="header-main">
        <div className="header-info">
          <div className="network-title-row">
            <Title level={2}>{network.name}</Title>
            <div className="title-tags">
              {getStatusTag(network.status)}
              <Tag color={network.isPublic ? 'green' : 'blue'}>
                {network.isPublic ? ' 公网' : ' 内网'}
              </Tag>
            </div>
          </div>
        </div>
        
        <div className="header-actions">
          <Space>
            <Button 
              icon={<ReloadOutlined />}
              onClick={onRefresh}
              loading={refreshLoading}
              className="action-button"
            >
              刷新
            </Button>
            {userRole ? (
              <>
                {userRole === 'admin' && (
                  <Button 
                    type="primary"
                    icon={<SettingOutlined />}
                    onClick={onManageNetwork}
                    className="action-button manage-button"
                  >
                    管理网络
                  </Button>
                )}
                <Popconfirm
                  title="确定要退出这个局域网吗？"
                  onConfirm={onLeaveNetwork}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button 
                    danger
                    icon={<LogoutOutlined />}
                    loading={operationLoading}
                    className="action-button danger-button"
                  >
                    退出网络
                  </Button>
                </Popconfirm>
              </>
            ) : (
              <Button 
                type="primary"
                icon={<UserAddOutlined />}
                onClick={onJoinNetwork}
                loading={operationLoading}
                disabled={network.status !== 'active'}
                className="action-button primary-button"
              >
                加入网络
              </Button>
            )}
          </Space>
        </div>
      </div>
    </div>
  );
};

export default PageHeader;